<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件</title>
  <script>
    function clickFun() {
      console.log("点击了按钮2");
    }
    window.onload = function () {
      // 点击按钮，改变div内容、大小、背景颜色
      // 获取div和btn节点
      var div = document.getElementById('div1');
      console.log(div);
      var btn1 = document.getElementsByTagName('button')[0];
      console.log(btn1);
      // 给获取到的节点绑定事件
      btn1.onclick = function (event) {
        console.log(event)
        div.innerHTML = '点击按钮1改变的'
        div.style.width = '200px'
        div.style.height = '200px'
        div.style.backgroundColor = 'blue'
      }
    }
  </script>
</head>

<body>
  <div id="div1">我是一个div</div>
  <button id="btn">点击我试试</button>
  <button id="btn2" onclick="clickFun()">再点我试试</button>
</body>

</html>